import zjl from './long.module.css'
import {useNavigate,Outlet} from 'react-router-dom'
import { Tabs } from 'react-vant'
import GoShop from './sucailan.png'
let App=()=>{
    let nav=useNavigate()
    let toRoutes=(e)=>{
        if(e==0){
            nav('/login/deng')
        }else if(e==1){
            nav('/login/sjh')
        }else if(e==2){
            nav('/login/hui')
        }
    }
    return (
        <div className={`${zjl.big_box}`}>

            <div className={`${zjl.top_box}`}>
                <div className={`${zjl.logo_box}`}>
                    <div className={`${zjl.logo}`}>LOGO</div>
                    <h5 className={`${zjl.tit_box}`}>生鲜电商</h5>
                </div>
                <div>
                    <h5 className={`${zjl.tit_box}`}>您好，欢迎使用生鲜电商购物平台</h5>
                </div>
            </div>
            <div className={`${zjl.back_box}`}>
                <div className={`${zjl.cai_box}`}>
                    <h5 className={`${zjl.h5}`}>生鲜甄选</h5>
                    <h5 style={{marginLeft:'150px'}} className={`${zjl.h5}`}>品质包装</h5>
                    <h5 style={{marginLeft:'300px'}} className={`${zjl.h5}`}>安全放心</h5>
                    <img src={GoShop} alt="" />
                </div>
                <div className={`${zjl.text_box}`}>
                    <Tabs defaultActive={0} color='rgb(153,204,51)' onChange={(e)=>toRoutes(e)}>
                        <Tabs.TabPane title={`账号登录`}>
                        </Tabs.TabPane>
                        <Tabs.TabPane title={`手机登录`}>
                        </Tabs.TabPane>
                        <Tabs.TabPane title={`忘记密码`}>
                        </Tabs.TabPane>
                    </Tabs>
                    <Outlet></Outlet>
                </div>
            </div>
            <div  className={`${zjl.but_box}`}>
                <p>Copyright © 2024-2024 JIUSHIKUXUAN 第六组所有</p>
            </div>
        </div>
    )
}

export default App